<template>
  <div class="iconBox">
    <el-tabs v-model="activeName">
      <el-tab-pane label="默认图标库" name="first">
        <SearchIcon :iconList="elementIcons" @getIcon="iconChange"></SearchIcon>
      </el-tab-pane>
      <el-tab-pane label="阿里巴巴国际站" name="second">
        <SearchIcon :iconList="aliIcons" @getIcon="iconChange"></SearchIcon>
      </el-tab-pane>
      <el-tab-pane label="Ant Design" name="third">
        <SearchIcon :iconList="antdIcons" @getIcon="iconChange"></SearchIcon>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import elementIcons, { aliIcons, antdIcons } from './element-icons'
import SearchIcon from './searchIcon.vue'

export default {
  name: 'Index',
  components: { SearchIcon },
  data () {
    return {
      activeName: 'first',
      elementIcons,
      aliIcons,
      antdIcons
    }
  },
  mounted () {
  },
  methods: {

    iconChange (n) {
      this.$emit('getIcon', n)
      this.$msgbox.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.icons-container {
  margin: 10px 20px 0;
  overflow: hidden;

  .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .icon-item {
    margin: 10px 20px;
    text-align: center;
    width: 100px;
    float: left;
    font-size: 30px;
    color: #24292e;
    cursor: pointer;
  }

  span {
    display: block;
    font-size: 16px;
    margin-top: 10px;
  }

  .disabled {
    pointer-events: none;
  }
}
</style>
